<template>
  <TableAlias :columns="columns"
              :pagination="pagination"
              :bordered="bordered"
              v-bind="$attrs">
    <template v-for="(value,key,index) in $slots"
              v-slot:[key]="data"
              :key="index">
      <slot :name="key"
            v-bind="data"></slot>
    </template>
  </TableAlias>
</template>

<script lang="ts">
import { defineComponent, onUpdated, reactive, ref, toRefs, watch } from 'vue';
import { Table as TableAlias } from 'ant-design-vue';
import config from './config';

export default defineComponent({
  name: 'ATable',
  components: { TableAlias },
  props: {
    columns: { type: Array, default: () => [] },
    pagination: {
      type: [Object, Boolean],
      default: () => ({})
    }
  },
  setup(props, ctx) {
    const pagination = ref();
    watch(
      () => props.pagination,
      val => {
        // 如果设置了false，则直接返回false
        pagination.value = val ? { ...config.props.pagination, ...val } : false;
      },
      { immediate: true, deep: true }
    );
    return {
      pagination,
      bordered: config.props.style.bordered
    };
  }
});
</script>